<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的处理</title>
</head>
<body>
<div id="change" class="change">
    <h1>{{ count }}</h1>
    <button data-on:click="decrease">-</button>
    <button data-on:click="increase">+</button>
</div>

<script !src="">
    let count = 0;

    function decrease(){
        -- count
    }

    function increase(){
        ++ count
    }


    // step1. 调整显示的内容为 初始值
    let showElement = document.querySelector("#change >h1");
    showElement.innerText = count

    let elementNodes = document.querySelectorAll("#change > button");
    // console.log(elementNodes);

    for (let i = 0; i < elementNodes.length; i++) {
        // console.log(elementNodes[i]);

        // 获取元素所有属性的名称
        let attributeNames = elementNodes[i].getAttributeNames();
        console.log(attributeNames);

        for (let j = 0; j < attributeNames.length; j++) {
            // 包含 data-on: 属性
            if (attributeNames[j].indexOf("data-on:") !== -1) {
                let indexOf = attributeNames[j].indexOf(":");
                let eventName = attributeNames[j].substring(indexOf + 1);
                let eventCode = elementNodes[i].getAttribute(attributeNames[j]);
                console.log(eventCode);

                elementNodes[i].addEventListener(eventName, function () {
                    eval(eventCode+"()")
                    // console.log(count);
                    showElement.innerText = count
                })
            }
        }
    }

</script>
</body>
</html>